<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-14 15:18:35
 * @LastEditTime: 2023-07-19 20:18:17
 * @FilePath: \myblog\src\mviews\components\CommentBar.vue
-->
<template>
  <van-tabbar>
      <van-cell-group @click="changeShow">
        <van-field center class="blogm-comment--search" placeholder="输入评论..." />
      </van-cell-group>
    <van-tabbar-item icon="comment-o" :badge="commentNum" @click="focusComment"></van-tabbar-item>
    <van-tabbar-item class="blogm-comment--like" icon="like-o" :badge="likeNum" @click="addLike" :class="{active: isLike}"></van-tabbar-item>
    <van-action-sheet v-model="show" round title="快来发表评论吧">
      <van-field
        v-model="comment"
        autofocus
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入评论"
        show-word-limit
      />
      <van-button class="blogm-comment-submit" type="info" @click="onSubmitComment">提交</van-button>
    </van-action-sheet>
  </van-tabbar>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const {mapGetters, mapActions} = createNamespacedHelpers('like');
import { Notify } from 'vant'
export default {
  components:{},
  data(){
    return {
      show: false,
      comment: '',
      aid: '',
      commentNum: 0,
      stepNum: 0,
      like_num: 0
    }
  },
created(){
  this.aid = this.$route.params.id
},
mounted(){
  this.$EventBus.$on('getCommentNum', (commentNum) => {
    this.commentNum =  commentNum
  })
  this.$EventBus.$on('getLikes', (likeNum) => {
      this.like_num = likeNum
  })
},
watch:{},
computed:{
  isLike() {
    return this.localLike(this.aid)
  },
  likeNum() {
    return Math.max(0, this.like_num + this.stepNum)
  },
  ...mapGetters({
    localLike: 'isLike'
  }),
},
methods:{
  changeLike() {
    this.stepNum += this.isLike ? -1 : 1
  },
  ...mapActions(['pullLike', 'pushLike', 'sendLikes']),
  addLike() {
    if (this.$store.state.token)
    {
      this.changeLike()
      this[this.isLike ? 'pullLike' : 'pushLike']({aid: this.aid})
        //发送点赞请求
      this.sendLikes({aid: this.aid});
    }
    else{
      Notify({
        type: 'warning',
        message: '暂无权限 请先登录账号'
      })
    }
  },
  focusComment() {
    this.$EventBus.$emit('focusComment');
  },
    changeShow() {
      if (!this.$store.state.token)
    {
      Notify({
        type: 'warning',
        message: '请先登录账号'
      })
      this.$EventBus.$emit('openShow', 'login');
      return false;
    }
      this.show = true;
    },
  //提交评论
  async onSubmitComment () {
    if (!(this.comment.trim().length > 0))
    {
      Notify({
        type: 'warning',
        message: '评论内容不能为空'
      })
      this.show = false;
      return false
    }
    try {
      await this.$api({type:'postComment', data:{aid: this.aid, content: this.comment}})
      Notify({
        type: 'success',
        message: '提交评论成功'
      })
      this.show = false;
      this.$EventBus.$emit('getArticleById');
    }
    catch(err)
    {
      Notify({
        type: 'danger',
        message: '提交评论失败'
      })
    }
  }
},
beforeDestroy() {
  this.$EventBus.$off('getCommentNum');
  this.$EventBus.$off('getLikes');
}
}
</script>
<style lang="scss" scoped>
  .blogm-comment--search {
    background-color: #f2f3f5;
    border-radius: 8px;
    margin-top: 5px;
    margin-left: 10px;
    line-height: 50px;
    height: 35px;
  }
  .blogm-comment-submit {
    width: 100%;
  }

  .blogm-comment--like.active {
    color: rgb(25, 152, 252)
  }
</style>